// pages/wifiShow/wifiShow.js

import utils from "../../utils/util"
Page({

    /**
     * 页面的初始数据
     */
    data: {
        qrcode: '',
        destMinWidth: 690, //背景宽度
        maxHeight: 995,//背景高度
        destMul: 2,   //画布写出倍数
        firstLine: '微信扫码连WiFi',
        secondLine: '一键快速连接 . 无需密码 . 安全防蹭网',
        thereLine: '无需密码，扫码就能连'
        
    },
    init(res) {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        const dpr = wx.getSystemInfoSync().pixelRatio; //获取屏幕的像素比  值为2
        //新接口需显示设置画布宽高； w*2 h*2
        canvas.width = res[0].width * dpr;
        canvas.height = res[0].height * dpr;
        ctx.scale(dpr, dpr); //缩放
        this.setData({
            canvas,
            ctx
        });
        //图片头像渲染完成之后，渲染文字
        this.code(ctx, canvas)
        this.title(ctx, canvas)
    },

    // 头像 使用 pormise方法来输出 代码执行成功，返回一个成功标识出去
    code(ctx, canvas) {
        return new Promise(rrr => {
            let code = this.data.canvas.createImage(); //创建img对象
            code.onload = () => {
                const phoneWidth = wx.getSystemInfoSync().windowWidth
                const phoneHeight = wx.getSystemInfoSync().windowHeight
                const widthDp = phoneWidth/320;
                const heightDp = phoneHeight/504;
                this.data.ctx.drawImage(code, 240*widthDp / 2 + 40 - 55, 200*heightDp / 2 + 40, 110, 110);
            };
            code.src = this.data.qrcode;
            setTimeout(() => {
                rrr(true)
            }, 100);
        })
    },

    //文字模块，不使用pormise，因为他是最后模块，所有不需要了
    title(ctx, canvas) {
        const phoneWidth = wx.getSystemInfoSync().windowWidth
        const phoneHeight = wx.getSystemInfoSync().windowHeight
        const widthDp = phoneWidth/320;
        const heightDp = phoneHeight/504;
        // 640 1010
        ctx.fillStyle = "#FFFFFF"
        ctx.fillRect(40, 40, 240 * widthDp , 200 * heightDp * 1.2)
        ctx.font = '400 24px Syst';
        ctx.fillStyle = "rgba(60, 59, 59)";
        ctx.fillText(this.data.firstLine,  240 * widthDp / 2 + 40 - (ctx.measureText(this.data.firstLine).width)/2 ,  80 * heightDp)
        ctx.font = '400 10px Syst';
        ctx.fillStyle = "#808080"; //添加颜色
        ctx.fillText(this.data.secondLine,  240 * widthDp / 2 + 40 - (ctx.measureText(this.data.secondLine).width)/2, 100 * heightDp)
        ctx.fillStyle = "rgba(16, 180, 182)"
        ctx.fillRect(40, 200 * heightDp * 1.2 , 240 * widthDp, 200 * heightDp * 1.2*0.3)
        ctx.fillStyle = "#ffffff "; //新增样式
        ctx.font = '400 12px Syst'
        ctx.fillText(this.data.thereLine, 240 * widthDp / 2 + 40 - (ctx.measureText(this.data.thereLine).width)/2 , 200 * heightDp * 1.2*0.3 / 2 + 200 * heightDp * 1.2)
    },

    handleSavePoster() {
        // 保存到相册
        wx.canvasToTempFilePath({ //将canvas生成图片
            canvas: this.data.canvas,
            x: 0,
            y: 0,
            success: function (res) {
                wx.saveImageToPhotosAlbum({ //保存图片到相册
                    filePath: res.tempFilePath,
                    success: function (res) {
                        wx.showToast({
                            title: "保存图片成功！",
                            duration: 2000
                        })
                    }
                })
            },
        }, this)

    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        console.log(options.qrcode)
        if (options.qrcode) {
            this.setData({
                qrcode: options.qrcode
            })
        }
    },
     handleSaveMini: function () {
        var t = this;
        if (!this.data.loading) {
            this.setData({
                loading: !0
            });
            var e = this.data.qrcode;
            wx.getImageInfo({
                src: e,
                success: function (e) {
                    var a = e.path;
                    wx.saveImageToPhotosAlbum({
                        filePath: a,
                        success: function () {
                            utils.wxshowtoast("已保存至相册，记得前往相册查看哦 ~").then(function () {
                                t.setData({
                                    loading: !1
                                });
                            });
                        },
                        fail: function (e) {
                            t.setData({
                                loading: !1
                            });
                        }
                    });
                },
                fail: function (e) {
                    t.setData({
                        loading: !1
                    });
                    utils.wxshowtoast("获取图片失败");
                }
            });
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
        const query = wx.createSelectorQuery()
        query.select('#canvas_box')
        .fields({
          id: true,
          node: true,
          size: true
        })
        .exec(this.init.bind(this))
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    },


})